<template>
    <div class="area-header">
        <h3 class="title">{{ title }}</h3>
        <div class="subtitle">{{ subtitle }}</div>
</div>
</template>
<script setup>
import { reactive ,ref} from 'vue'

defineProps({
    title:{
        type:String,
        default:"默认"
    },
    subtitle:{
        type:String,
        default:"默认子"
    },
})

</script>
<style lang="less" scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
    .area-header{
        height: 84px;
        .title{
            font-size: 22px;
        }
        .subtitle{
            font-size: 16px;
            margin-top: 12px;
        }
    }
</style>